<script setup>

import {ref} from "vue";

const isshow = ref(false);
</script>

<template>
<h1>隐藏显示指令</h1>
<!-- v-if元素不会再dom中渲染，直接跳过  -->
<!-- v-show 通过修改css样式 display:none 让元素消失 -->
<p v-if="true">花花</p>
<p v-if="false">草草</p>
<p v-show="false">花花</p>
<p v-show="true">草草</p>

  <p v-if="isshow">月亮</p>
<!-- v-else找离自己最近的v-if取反显示 -->
  <p v-else>太阳</p>
</template>

<style scoped>

</style>